<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器</title>
		<script src="./js/vue.js"></script>
		<script src="./js/dayjs.min.js"></script>
	</head>
	<body>
		
		<div id="root">
			<h2>显示格式化的时间</h2>
			<!-- computed实现 -->
			<h3>现在是:{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是:{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是:{{time | timeFormat}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是:{{time | timeFormat('YYYY年MM月DD日') | mySlice}}</h3>
		</div>
		<script>
			Vue.config.productionTip = false;
			// 全局过滤器
			Vue.filter('mySlice',function(time){
				return time.slice(0,4);
			});
			const vm = new Vue({
				el:'#root',
				data:{
					time:1723261562618
				},
				computed:{
					fmtTime(){
						return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
					}
				},
				methods:{
					getFmtTime(){
						return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
					}
				},
				filters:{
					// 局部过滤器
					timeFormat(val,fmt='YYYY年MM月DD日 HH:mm:ss'){
						return dayjs(val).format(fmt);
					}
				}
			});
		</script>
	</body>
</html>